<template>
  <div class="min-h-screen bg-gray-100 flex justify-center items-start py-12">
    <div class="w-full max-w-4xl">
      <!-- 卡片 -->
      <div class="bg-white rounded-3xl shadow-xl p-8">
        <h2 class="text-4xl font-extrabold text-center text-indigo-600 mb-8">公司注册</h2>

        <el-form :model="form" label-width="150px" size="default" class="space-y-6">
          <el-collapse v-model="activeNames" accordion>
            <!-- 公司信息 -->
            <el-collapse-item title="公司信息" name="1">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <el-form-item label="公司名称" required>
                  <el-input v-model="form.companyName" placeholder="请输入公司名称" />
                </el-form-item>

                <el-form-item label="公司地址" required>
                  <el-input v-model="form.companyAddr" placeholder="请输入公司地址" />
                </el-form-item>

                <el-form-item label="统一社会信用代码">
                  <el-input v-model="form.uscc" placeholder="请输入统一社会信用代码" />
                </el-form-item>

                <el-form-item label="注册资本">
                  <el-input v-model="form.capital" placeholder="万元" />
                </el-form-item>

                <el-form-item label="公司类型">
                  <el-select v-model="form.companyType" placeholder="请选择公司类型">
                    <el-option
                        v-for="item in companyTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="成立日期">
                  <el-date-picker v-model="form.establishDate" type="date" placeholder="选择成立日期"/>
                </el-form-item>

                <el-form-item label="行业分类">
                  <el-select v-model="form.industry" placeholder="请选择行业">
                    <el-option
                        v-for="item in industryOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="营业执照">
                  <el-upload
                      action="#"
                      list-type="picture-card"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :limit="1"
                      :auto-upload="false"
                      :file-list="fileList"
                      drag
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">点击上传或拖拽文件</div>
                  </el-upload>
                </el-form-item>
              </div>
            </el-collapse-item>

            <!-- 联系人信息 -->
            <el-collapse-item title="联系人信息" name="2">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <el-form-item label="联系人姓名" required>
                  <el-input v-model="form.contactName" placeholder="请输入联系人姓名" />
                </el-form-item>

                <el-form-item label="联系电话" required>
                  <el-input v-model="form.contactPhone" placeholder="请输入联系人电话" />
                </el-form-item>

                <el-form-item label="联系人邮箱">
                  <el-input v-model="form.contactEmail" placeholder="请输入联系人邮箱" />
                </el-form-item>

                <el-form-item label="职位">
                  <el-input v-model="form.contactPosition" placeholder="请输入职位" />
                </el-form-item>

                <el-form-item label="微信">
                  <el-input v-model="form.contactVX" placeholder="请输入微信" />
                </el-form-item>

                <el-form-item label="QQ">
                  <el-input v-model="form.contactQQ" placeholder="请输入QQ" />
                </el-form-item>
              </div>
            </el-collapse-item>
          </el-collapse>

          <!-- 按钮 -->
          <el-form-item class="flex justify-center gap-6 mt-8">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button type="success" @click="autoFill">智能填充</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { chatApi } from '@/api/core'

const activeNames = ref(['1', '2'])

const form = reactive({
  companyName: '',
  companyAddr: '',
  uscc: '',
  capital: '',
  companyType: '',
  establishDate: '',
  industry: '',
  contactName: '',
  contactPhone: '',
  contactEmail: '',
  contactPosition: '',
  contactVX: '',
  contactQQ: ''
})

const companyTypeOptions = [
  { label: '有限责任公司', value: 'c1' },
  { label: '股份有限公司', value: 'c2' },
  { label: '合伙企业', value: 'c3' },
  { label: '个体工商户', value: 'c4' },
]

const industryOptions = [
  { label: '信息技术', value: 'x1' },
  { label: '制造业', value: 'x2' },
  { label: '教育培训', value: 'x3' },
  { label: '金融服务', value: 'x4' },
  { label: '其他', value: 'x5' },
]

const fileList = ref([])

const handlePreview = (file: any) => console.log('预览文件:', file)
const handleRemove = (file: any, fileList: any) => console.log('移除文件:', file, fileList)

const autoFill = async () => {
  try {
    const userInput = await ElMessageBox.prompt('请输入智能填充所需的信息', '智能填充', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPlaceholder: '请输入信息…',
      inputType: 'textarea',
    })
    const dicts = {
      companyTypeOptions,
      industryOptions
    }
    const res = await chatApi.aiFill(userInput.value,form,JSON.stringify(dicts))
    ElMessage.success('表单已智能填充')
    console.log('AI 填充结果:', res.data)
    Object.assign(form, res.data)
  } catch (err) {
    console.log('用户取消输入', err)
  }
}

const submitForm = () => {
  console.log('submitForm', form)
  ElMessage.success('表单提交成功！')
}

const resetForm = () => {
  (Object.keys(form) as (keyof typeof form)[]).forEach(key => form[key] = '')
  fileList.value = []
  ElMessage.info('表单已重置')
}
</script>

<style scoped>
/* 卡片阴影与圆角 */
.bg-white {
  background-color: #fff;
}
.shadow-xl {
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.rounded-3xl {
  border-radius: 24px;
}
</style>